<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>camera</title>
    <style type="text/css">
        .container {
            height: 100%;
        }
        .tips {
            width: 80%;
            margin: 20px auto;
            font-size: 14px;
            line-height: 20px;
            color: #fc9153;
        }
        .camera-input {
            position: relative;
            height: 30px;
        }
        .video-button {
            margin: 0 auto;
            width: 80%;
            background: #fc9153;
            font-size: 14px;
            color: #fff;
            line-height: 30px;
            text-align: center;
        }
        #take-video {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 30px;
            box-sizing: border-box;
            border: 1px solid #fdfdfd;
            line-height: 28px;
            opacity: 0;
        }
        #video-show {
            margin-top: 20px;
            max-height: 200px;
        }
        #video-show video {
            display: block;
            margin: 0 auto;
            max-height: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="tips">本demo主要针对移动端的H5页面调起摄像头，录制视频，并显示。</div>
    <div class="camera-input">
        <div class="video-button">录制视频</div>
        <input type="file" accept="video/*" id="take-video" capture="camcorder"/>
    </div>
    <div id="video-show"></div>
</div>
<script>
    const input = document.getElementById('take-video');
    const container = document.getElementById('video-show');
    input.onchange = function (event) {
        const files = event.target.files;
        if (files && files.length > 0) {
            let file = files[0];
            if (file.size > 50 * 1024 * 1024) {
                alert('视频大于50M，请重新上传');
                return;
            }
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.addEventListener('loadend', function() {
                const localVideo = document.getElementById('local-video');
                if (localVideo) {
                    localVideo.src = reader.result;
                }
                else {
                    const video = document.createElement('video');
                    video.src = reader.result;
                    video.id = 'local-video';
                    video.setAttribute('controls', 'controls');
                    container.appendChild(video);
                }

            })
        }
        else {
            alert('请重新上传视频');
        }
    }
</script>
</body>
</html>